<template>
  <view class="container">
    <text class="back-btn iconfont icon-navbar_close" @click="navBack"></text>
    <view class="right-top-sign"></view>
    <view class="wrapper">
      <view class="welcome"> 手机号登录 </view>
      <view style="font-size: 12px; margin: 10px 0" class="welcome">
        欢迎登录炎华潮玩
      </view>
      <view class="login_from">
        <view class="login_from_li flex_box">
          <input type="number" class="login_from_input" placeholder="输入手机号" v-model="mobile" />
        </view>
        <view class="login_from_li flex_box">
          <input type="number" class="login_from_input" placeholder="输入验证码" v-model="phoneCode" />
          <!-- <button class="login_from_bot flex_shrink font16">获取验证码</button> -->

          <button class="login_from_bot flex_shrink" plain v-show="show" @click="getCode">
            获取验证码
          </button>
          <button class="login_from_bot sending flex_shrink" plain v-show="!show">
            {{ count }}s后重新获取
          </button>
        </view>
        <view style="margin-top: 65px" class="flex_box">
          <view class="checkbox" style="margin: 5px auto; font-size: 12px">
            <u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
              <u-checkbox shape="circle" activeColor="#FF5900" :customStyle="{ marginBottom: '8px' }">
              </u-checkbox>
            </u-checkbox-group>
            <view>未注册手机号登录后将自动创建账号，且代表您阅读并同意<span class="color_link" @click="
                  routerJump('http://ta.jiyaqi.com/policy/app_privacy.html','隐私政策')
                ">《隐私政策》</span>
              、
              <span class="color_link" @click="
                  routerJump('http://ta.jiyaqi.com/policy/app_user_policy.html','用户协议')
                ">《用户协议》</span>
            </view>
          </view>
        </view>
        <view class="uni-padding-wrap"> </view>
      </view>
      <button class="confirm-btn" @click="handleCodeLogin" :loading="logining" :disabled="logining">
        立即登录
      </button>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { GetCode, CodeLogin } from '@/api/login/login'
import pageMixin from '@/mixins/pageMixin'
export default {
  mixins: [pageMixin],
  data () {
    return {
      mobile: '',
      password: '',
      logining: false,
      phoneCode: '',
      //短信提示
      show: true,
      count: '',
      timer: null,
      checked: false,
      checkboxValue: [],
    }
  },
  onLoad () { },
  computed: {
    ...mapGetters(['roles']),
  },

  methods: {
    ...mapActions('user', ['CodeLogin', 'GetUserInfo', 'IMLogin']),
    ...mapMutations('common', ['SET_TABBAR']),
    checkboxChange (n) {
      console.log('change', this.checkboxValue.length)
    },
    //获得验证码
    async getCode () {
      let reg = /^[1]\d{10}$/
      if (this.mobile == '') return uni.$u.toast('请输入手机号')
      if (!reg.test(this.mobile)) return uni.$u.toast('手机号格式有误')
      if (this.checkboxValue.length == 0) return uni.$u.toast('请阅读并勾选以下政策与协议')

      await GetCode({ phone: this.mobile })
      uni.showToast({
        title: '验证码已发送',
        icon: 'success',
        mask: false,
        duration: 2000,
      })
      this.timeRun()
    },
    timeRun () {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },

    //手机验证码登录
    handleCodeLogin () {
      let reg = /^[1]\d{10}$/
      if (!this.mobile) return uni.$u.toast('请输入手机号')
      if (!reg.test(this.mobile)) return uni.$u.toast('手机号格式有误')
      if (!this.phoneCode) return uni.$u.toast('请输入验证码')
      if (this.checkboxValue.length == 0) return uni.$u.toast('请阅读并勾选以下政策与协议')

      this.logining = true
      this.CodeLogin({ phone: this.mobile, phoneCode: this.phoneCode })
        .then(async () => {
          // 获取用户信息
          uni.$u.toast('登录成功')
          await this.GetUserInfo()
          //登陸IM
          this.IMLogin()
          this.logining = false
          // 登录跳转首页 并修改tabbar
          this.SET_TABBAR(0)
          uni.switchTab({
            url: '/pages/index/index',
          })

        })
        .catch(error => {
          this.logining = false
        })
    },
    navBack () {
      uni.navigateBack()
      // this.$QuickLogin()
    },
    routerJump (url, type) {
      // plus.runtime.openURL(url)
      this.toPage(`public/webview?url=${url}&type=${type}`, false)
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: #fff;
}
.container {
  padding-top: 155rpx;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}
.wrapper {
  padding-top: 200rpx;
  position: relative;
  z-index: 90;
  background: #fff;
  padding-bottom: 40rpx;
}
.back-btn {
  position: absolute;
  left: 40rpx;
  z-index: 9999;
  padding-top: var(--status-bar-height);
  top: 40rpx;
  font-size: 60rpx;
  color: $font-color-dark;
  font-weight: 500;
}
.left-top-sign {
  font-size: 120rpx;
  color: $page-color-base;
  position: relative;
  left: -16rpx;
}
.right-top-sign {
  position: absolute;
  top: 80rpx;
  right: -30rpx;
  z-index: 95;

  &:before {
    transform: rotate(50deg);
    border-radius: 0 50px 0 0;
  }
  &:after {
    position: absolute;
    right: -198rpx;
    top: 0;
    transform: rotate(-50deg);
    border-radius: 50px 0 0 0;
    /* background: pink; */
  }
}
.left-bottom-sign {
  position: absolute;
  left: -270rpx;
  bottom: -320rpx;
  border: 100rpx solid #d0d1fd;
  border-radius: 50%;
  padding: 180rpx;
}
.welcome {
  position: relative;
  left: 50rpx;
  top: -90rpx;
  font-size: 46rpx;
  color: #555;
  // text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
}
.input-content {
  padding: 0 60rpx;
}
.input-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 30rpx;
  background: $page-color-light;
  height: 120rpx;
  border-radius: 4px;
  margin-bottom: 50rpx;
  &:last-child {
    margin-bottom: 0;
  }
  .tit {
    height: 50rpx;
    line-height: 56rpx;
    font-size: $font-sm + 2rpx;
    color: $font-color-base;
  }
  input {
    height: 60rpx;
    font-size: $font-base + 2rpx;
    color: $font-color-dark;
    width: 100%;
  }
}

.confirm-btn {
  width: 630rpx;
  height: 76rpx;
  line-height: 76rpx;
  border-radius: 50px;
  margin-top: 70rpx;
  background: $base-color;
  height: 40px;
  color: #fff;
  font-size: $font-lg;
  &:after {
    border-radius: 100px;
  }
}

.register-section {
  position: absolute;
  left: 0;
  bottom: 50rpx;
  width: 100%;
  font-size: $font-sm + 2rpx;
  color: $font-color-base;
  text-align: center;
  text {
    color: $font-color-spec;
    margin-left: 10rpx;
  }
}

.login_from {
  padding: 0 40px;
  color: #373737;
  .login_from_li {
    font-size: 16px;
    box-sizing: border-box;
    padding: 15px 0px 8px 5px;
    border-bottom: 1px solid #f3f3f3;
    &:first-child {
      padding-top: 8px;
    }
  }
  .login_from_text {
    display: block;
    width: 60px;
  }
  .login_from_input {
    border: none;
    width: 100%;
    &::placeholder {
      color: #b8b8b8;
    }
  }
  .login_from_bot {
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    border: solid 1px $base-color;
    color: $base-color;
    background-color: transparent;
    padding-left: 10px;
    border-radius: 25px;
    background-color: #fff;
  }
  .sending {
    color: #ccc;
    border: solid 1px #ccc;
  }
  .login_type_li {
    width: 50%;
    img {
      width: 43px;
    }
  }
  .login_type {
    width: 206px;
    margin: auto;
  }
  .agreement {
    cursor: pointer;
  }
  .checkbox {
    display: flex;
    justify-content: center;
  }
}
.flex_shrink {
  flex-shrink: 0;
}
/* flex布局 */
.flex_box {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.color_link {
  color: $base-color;
}
// /deep/.van-checkbox__icon {
//   font-size: 16px;
// }
</style>
